<template>
      <div>
            <!-- 面包屑导航 -->
            <breadcrumb first="权限管理" second="权限列表"></breadcrumb>
            
            <!-- 卡片 -->
            <el-card class="box-card">
                  <el-table :data="rightsList" border :total="total">
                        <el-table-column type="index" min-width="40"></el-table-column>
                        <el-table-column prop="authName" label="权限名称" min-width="100"></el-table-column>
                        <el-table-column prop="path" label="路径" min-width="100"></el-table-column>
                        <el-table-column prop="level" label="权限等级" min-width="100">
                              <template slot-scope="scope">
                                    <el-tag :type="scope.row.level == '0' ? '' : scope.row.level == '1' ? 'success' :  'warning'">
                                          {{level[scope.row.level]}}
                                    </el-tag>
                              </template>
                        </el-table-column>
                  </el-table>
            </el-card>
      </div>
</template>

<script>
import BreadCrumb from './breadcrumb'
export default {
      components:{
            breadcrumb: BreadCrumb
      },
      data(){
            return {
                  rightsList: [],
                  total: null,
                  level: { 
                        '0': '一级',
                        '1': '二级',
                        '2': '三级',
                  }
            }
      },
      created(){
            this.getRightsList();
      },
      methods:{
            async getRightsList(){
                  const {data: res} = await this.$http.get('/rights/list');
                  if(res.meta.status !==200)      return this.$message.error('获取权限信息失败');
                  this.rightsList = res.data;
                  this.total = res.data.length;
            }
      }
}
</script>

<style scoped>
.el-card{
      width: 720px;
}
.el-table{
      width: 700px;
}
</style>